<template>
  <div style="margin-top: 100px">
    <mu-container>
      <mu-card style="width: 100%; max-width: 375px; margin: 0 auto;">
        <mu-card-title title="Tensorflow 网上实验平台" sub-title="version 0.1"></mu-card-title>
        <mu-card-text>
          <mu-form  :model="userLoginData"  class="mu-demo-form">
            <mu-form-item label="用户名" prop="username">
              <mu-text-field v-model="userLoginData.id"></mu-text-field>
            </mu-form-item>
            <mu-form-item label="密码" prop="password" >
              <mu-text-field type="password" v-model="userLoginData.pwd"></mu-text-field>
            </mu-form-item>
          </mu-form>
        </mu-card-text>
        <mu-card-actions>
          <mu-button @click="userLogin" color="primary">登录</mu-button>
        </mu-card-actions>
      </mu-card>
    </mu-container>  </div>
</template>

<script>
import qs from "qs"
import axios from "axios"
export default {
  name: "Login",
  data(){
    return {
      userLoginData:{
        id:"",
        pwd:""
      }
    }
  },
  methods:{
    show(){
//      console.log(document.getElementById('inputPassword'))
    },
    userLogin(){
        var _this=this
        var data=this.$data.userLoginData;
        if(data.id==""||data.pwd==""){
          alert("账号或密码不能为空")
          return;
        }
        axios.post("http://192.168.31.103:2444/LoginCenter/login",qs.stringify(data)).then(function(res){
          console.log(res);
          if(res.data=="-1"){
            alert("账号或密码错误，请重新输入")
          }
          else{
            _this.$router.push({path:"/main"})
          }
        });
    }

  }
}
</script>

<style>
.mu-demo-form {
  width: 100%;
  max-width: 460px;
}
</style>
